<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<!-- 开发环境版本，包含了有帮助的命令行警告 -->
		<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
		<style>
		.gone-enter-active{
			animation: bounce-in .5s;
		}
		.gone-leave-actvie{
				animation: bounce-in .5s reverse;
			/* 弹出效果 */
		}
		@keyframes bounce-in{
			0%{
				transform: scale(0);
				/* 缩放倍速 */
			}
			50%{
				transform: scale(1.5);
			}
			100%{
				transform: scale(1);
			}
		}
		</style>
		<title></title>
	</head>
	<body>
		<div id="app">
			<button @click="change">点击我</button>
				<transition name="gone">
					<p v-if="show">这是一个段落</p>
				</transition>
		</div>
		
		<script>
			new Vue({
				el:"#app",
				data:{
					show:true,//隐藏或者显示
				},
				methods:{
					change:function(){
						this.show=!this.show
					}
				}
			})
		</script>
	</body>
</html>
